<template>
    <view>

        <view class="cu-card dynamic guoshao-top-info">
			<view class="cu-tag top-label">部分图片来源于网络，如有侵权，请联系我们删除，谢谢理解~</view>
            
			<view class="cu-item shadow" style="margin: 0px">
				
                <view class="cu-list menu-avatar" >
                    <view class="cu-item" @click.stop.prevent="shengming()">
                        <view class="cu-avatar round lg" v-if="info" :style="'background-image:url(' + info.avatarUrl + ');'"></view>
                        <view class="content flex-sub" v-if="info">
                            <view>{{ info.word }}</view>
                            <view class="text-gray text-sm flex justify-between">作品数量：{{ info.worksCount }}</view>
                        </view>
						<view class="shengming"  @click="shengming()">
							<view >声 明</view>
						</view>
                    </view>
					
                </view>
				
            </view>
        </view>

        <!-- 分类栏 begin-->
        <scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
            <view
				v-for="(item,index) in classList" :key="index"
                :class="'tab-bar-item ' + (currentTab == index ? 'active' : '')"
                :data-current="index"
                :data-classid="item.id"
                :data-classtype="item.classType"
                @click.stop.prevent="swichNav"
            >
                <text class="tab-bar-title">{{ item.name }}</text>
            </view>
        </scroll-view>
        <!-- 分类栏 end-->
		
		   <!-- 二级分类栏 end-->
		<scroll-view scroll-x class="bg-white nav tab-view-two"
		scroll-with-animation :scroll-left="scrollLeftTwo" v-if="twoClassData.length > 0">
			
			<view
			    :class="'cu-item round cu-btn sm guoshao-tab ' + (idTwo == item.id ? ' tab-view-sel' : '')"
				v-for="(item,index) in twoClassData"
			    :key="index"
				:data-current="index"
			    :data-id="item.id"
			    @click.stop.prevent="tabSelectTwo"
			>
			    {{ item.name }}
			</view>
		</scroll-view>

		<!-- 二级分类栏 end-->
		
		
        <view class="container">
            <view class="list-box data-v-0034d6f4" :style="twoClassData.length>0 ? 'margin-top: 200px;' : ''">
                <block v-for="(item,index) in postsLast" :key="index">
                    <block v-if="classType == 1">
						<view >
							<view class='cu-tag radius bg-cyan guoshao-tags' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="image data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerArticleClick"
							></image>
							
						</view>
                    </block>
                    <block v-if="classType == 2">
						<view >
							<view class='cu-tag radius bg-cyan guoshao-tags' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="image data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerArticleClick"
							></image>
						</view >
                    </block>
                    <block v-if="classType == 3">
						<view >
							<view class='cu-tag radius bg-cyan guoshao-tags-3' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="background-image data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerArticleClick"
							></image>
						</view >
                    </block>
                    <block v-if="classType == 4">
						<view >
							<view class='cu-tag radius bg-cyan guoshao-tags-4' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="emoticon data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerArticleClick"
							></image>
						</view >
                    </block>
                    <block v-if="classType == 5">
						<view >
							<view class='cu-tag radius bg-cyan guoshao-tags-4' v-if="item.topping == 1">
								置顶
							</view>
							<image
								:src="item.thumbnail"
								mode="aspectFill"
								class="emoticon data-v-0034d6f4"
								:index="index"
								:data-id="item.id"
								@click.stop.prevent="handlerArticleClick"
							></image>
						</view >
                    </block>
                </block>
            </view>
            <!--加载loadding-->
            <tui-loadmore :visible="loaddingLast"></tui-loadmore>
            <tui-nomore :visible="!pullUpOnLast"></tui-nomore>
            <!--加载loadding-->
        </view>
    </view>
</template>

<script>
import tuiLoading from '../../../components/loading/loading';
import tuiLoadmore from '../../../components/loadmore/loadmore';
import tuiNomore from '../../../components/nomore/nomore';
// d:\applet\byteApplet\dy-wallpaper-applet-2\pages\talent\mytalent\mytalent.js
const Constants = require('../../../utils/constants');

const Rest = require('../../../utils/rest');

const http = require('../../../utils/http.js');

const util = require('../../../utils/util.js');

let setinad;
export default {
    components: {
        tuiLoading,
        tuiLoadmore,
        tuiNomore
    },
    data() {
        return {
            pageNum: 1,
            loaddingLast: false,
            postsLast: [],
            pullUpOnLast: true,
            userid: '',
            info: null,
            classType: 0,
            currentTab: 0,
            classList: [],
            scrollLeft: 0,
			scrollLeftTwo:0,
			twoClassData:[],
			idTwo:0
        };
    },
    onLoad: function (options) {
        this.setData({
            userid: options.userid,
        });
        this.getTalentInfo(); //this.init();
        this.getClassList();
    },
    onShow() {
		var that = this; //分享
		util.getAD(
		    that,
		    function () {
		        that.setInterstitialAd(); //加载插屏广告
		    });
	},
    onPullDownRefresh: function () {},
    onReachBottom: function () {
        if (!this.pullUpOnLast) {
            return;
        }

        this.loadPostLast(false);
    },
	onHide() {
	    clearInterval(setinad);
	},
    methods: {
		// 获取小程序插屏广告
		setInterstitialAd: function () {
		    var that = this;
		
		    if (that.setAD.interstitialid && uni.createInterstitialAd) {
		        let interstitialAd = uni.createInterstitialAd({
		            adUnitId: that.setAD.interstitialid
		        }); // 监听插屏错误事件
		
		        interstitialAd.onError((err) => {
		            console.error(err);
		        }); // 显示广告
		
		        if (interstitialAd) {
		            if (that.setAD.switch_inad == 'yes') {
		                setinad = setInterval(() => {
		                    interstitialAd.show().catch((err) => {
		                        console.error(err);
		                    });
		                }, 2000);
		            } else {
		                setTimeout(() => {
		                    interstitialAd.show().catch((err) => {
		                        console.error(err);
		                    });
		                }, 6000);
		            }
		        }
		    }
		},
		shengming:function(){
			uni.showModal({
				title:'声明',
				content:'创作者上传至小程序的素材内容由创作者负责，图片来源网络，如有侵权，请联系我们进行删除处理',
				confirmText:'确定',
				showCancel:false
			})
		},
        init: function () {
            //加载首页图片
            this.loadPostLast(true);
        },

        //加载数据
        loadPostLast: function (refresh) {
            let that = this;

            if (!refresh) {
                let page = ++that.pageNum;
                that.setData({
                    loaddingLast: true,
                    pageNum: page
                });
            }

            uni.showLoading({
                title: '加载中',
                success: (res) => {},
                fail: (res) => {}
            });
            var params = {
                url: '/platform/wallpaper',
                method: 'GET',
                data: {
                    pageNum: that.pageNum,
                    pageSize: Constants.JQ_PER_PAGE_COUNT,
                    order: 4,
                    openid: that.userid,
                    classId: that.classList[that.currentTab].id,
					twoClassId:that.idTwo
                },
                callBack: function (res) {
                    that.setData({
                        loaddingLast: false,
                        postsLast: refresh ? res.data.list : that.postsLast.concat(res.data.list),
                        pullUpOnLast: !res.data.isLastPage ? true : false
                    });
                    uni.hideLoading();
                }
            };
            http.request(params); // 加载分类 end
        },

        getTalentInfo: function () {
            let that = this;
            uni.showLoading({
                title: '加载中'
            });
            var params = {
                url: '/talent/getTalentInfo',
                method: 'GET',
                data: {
                    offset: 0,
                    userid: that.userid
                },
                callBack: function (res) {
                    if (res.code == 200) {
                        that.setData({
                            info: res.data
                        });
                        uni.hideLoading();
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'fail',
                            duration: 2000
                        });
                    }
                }
            };
            http.request(params);
        },

        handlerArticleClick: function (e) {
            let post_id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/article/article?post_id=' + post_id
            });
        },

        swichNav: function (e) {
            let cur = e.currentTarget.dataset.current;
            let classType = e.currentTarget.dataset.classtype;

            if (this.currentTab == cur) {
                return false;
            }

			this.scrollLeft = (e.currentTarget.dataset.current - 1) * 60;

            this.setData({
                currentTab: cur,
                classType: classType,
                pageNum: 1,
				idTwo:0
            }); //分类数据
			this.userClassifiList();
            this.loadPostLast(true); //如果点击首页进行定位
        },
		tabSelectTwo:function(e){
			let id = e.currentTarget.dataset.id;
			
			if (this.idTwo == id) {
			    return false;
			}
			this.scrollLeftTwo = (e.currentTarget.dataset.current - 1) * 60;
			this.setData({
			    idTwo: id,
			    pageNum: 1
			});
			
			this.loadPostLast(true); 
		},

        getClassList: function () {
            let that = this;
            var params = {
                url: '/classification/getUserDataClass/'+ that.userid,
                method: 'GET',
                data: {},
                callBack: function (res) {
                    if (res.code == 200) {
                        that.setData({
                            classList: res.data,
                            classType: res.data.length > 0 ? res.data[0].classType : 0
                        });
						that.userClassifiList();
                        that.loadPostLast(true);
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'fail',
                            duration: 2000
                        });
                    }
                }
            };
            http.request(params);
        },
		userClassifiList: function () {
		    let that = this;
		    var params = {
		        url: '/classification/userClassifiList',
		        method: 'GET',
		        data: {
					parentId: that.classList[that.currentTab].id,
					status: 1,
					userId: that.userid
				},
		        callBack: function (res) {
					that.twoClassData = [];
					if(res.data.length > 0){
						let obj = new Object();
						obj.id = 0;
						obj.name = '全部';
						that.twoClassData.push(obj);
						that.twoClassData  = that.twoClassData.concat(res.data);
					}
		        }
		    };
		    http.request(params);
		},
		
    }
};
</script>
<style>
@import './mytalent.css';
</style>
